@import './_vars.scss';
.xdh-map-tooltip{  
  position: relative;
  min-width: auto;
  &__wrap{
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
  }
  &__content{
    flex: 0 0 auto;
  }
  &__tool{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: 4px;
    padding-left: 3px;
    border-left: 1px solid gray;
  }
  &__shadow{
    position: absolute;
    left: 20%;
    bottom: 0;
    width: 60%;
    height: 30%;
    transform: translate(0, 26px);
    background-image: radial-gradient(rgba(0,0,0,0.5), transparent)
  }
  // &__tag{
  //   position: absolute;
  //   padding: 5px;
  //   border-radius: $--border-radius;
  //   white-space:nowrap;
  //   transition: all 0.5s;
  //   &:before{
  //     content: '';
  //     position: absolute;
  //     display:block;
  //     width: 15px;
  //     height: 15px;
  //   }
  //   &.top{
  //     left: 50%;
  //     top: 50%;
  //     transform: translate3d(-50%, calc(-100% - 10px), 0);
    
  //     &:before{
  //       left: 50%;
  //       bottom: -8px;
  //       margin-left: -6px;
  //       transform: rotate(135deg);
  //     }
  //   }
  //   &.bottom{
  //     left: 50%;
  //     top: 50%;
  //     transform: translate3d(-50%, 10px, 0);
  //     &:before{
  //       left: 50%;
  //       top: -8px;
  //       margin-left: -6px;
  //       transform: rotate(-45deg);
  //     }
  //   }
  //   &.left{
  //     left: 50%;
  //     top: 50%;
  //     transform: translate3d(calc(-100% - 10px), -50%, 0);
  //     &:before{
  //       right: -8px;
  //       top: 50%;
  //       margin-top: -8px;
  //       transform: rotate(45deg);
  //     }
  //   }
  //   &.right{
  //     left: 50%;
  //     top: 50%;
  //     transform: translate3d(10px, -50%, 0);
  //     &:before{
  //       left: -8px;
  //       top: 50%;
  //       margin-top: -8px;
  //       transform: rotate(-135deg);
  //     }
  //   }
  //   &.is-dark{
  //     background: $--tooltips-bg-dark;
  //     color: $--tooltips-color-dark;
  //     &:before{
  //       background-image: linear-gradient(45deg, transparent 0, transparent 48%, $--tooltips-bg-dark 48%, $--tooltips-bg-dark 100%);
  //     }
  //   }
  //   &.is-light{
  //     background: $--tooltips-bg-light;
  //     color: $--tooltips-color-light;
  //     &:before{
  //       background-image: linear-gradient(45deg, transparent 0, transparent 48%, $--tooltips-bg-light 48%, $--tooltips-bg-light 100%);
  //     }
  //   }
  // }
}